<template>
	<view class="pb-safe-area">
		<view class="p-4 flex grid-gap-4 position-sticky bg" v-if="$auth.user('scheduling')">
			<button class="flex-1 btn-danger btn-round"
				@click="$page.open('/technician/pages/user/scheduling/save?action=batch', true)">批量调整</button>
			<button class="flex-1 btn-primary btn-round"
				@click="$page.open('/technician/pages/user/scheduling/save', true)">调整排班</button>
		</view>
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
			<view class="bg-white p-4 flex flex-column grid-gap-2" v-for="(item,index) in list" :key="index">
				<text class="font-weight-600">{{ item.start }} ~ {{ item.end }}</text>
				<view class="grid-columns-10 grid-x-gap-2 grid-y-gap-6">
					<view class="grid-column-2 flex flex-column flex-center rounded-4 py-2"
						v-for="(matrix, index) in item.matrix" :key="index"
						:class="matrix.state == 0 ? 'bg-primary text-white' : 'bg'">
						<text class="h8">{{ matrix.time }}</text>
						<text class="h10" v-if="matrix.state == 0">预约</text>
						<text class="h10" v-if="matrix.state == 2">已预约</text>
						<text class="h10" v-if="matrix.state == 1">无</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-center vh-50" v-else>
			<x-empty type="order" text="暂无排班"></x-empty>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { $func, $api, $message, $page, $auth } from '@/utils';
import { onShow } from '@dcloudio/uni-app'
const loading = ref(false)
const list = ref([])

const getList = () => {
	if (loading.value) return;
	loading.value = true;
	list.value = [];
	$api.TechnicianScheduling.index().then(data => {
		for (let i = 0; i < data.length; i++) {
			const item = data[i];
			item.start_date = new Date(item.start_time.replace(/-/g, '/'));
			item.end_date = new Date(item.end_time.replace(/-/g, '/'));
			item.start = `${$func.getDayName(item.start_date)} ${item.start_date.getHours().toString().padStart(2, '0')}:${item.start_date.getMinutes().toString().padStart(2, '0')}`;
			item.end = `${$func.getDayName(item.end_date)} ${item.end_date.getHours().toString().padStart(2, '0')}:${item.end_date.getMinutes().toString().padStart(2, '0')}`;
			for (let j = 0; j < item.matrix.length; j++) {
				const matrix = item.matrix[j];
				matrix.date = new Date(matrix.start_time.replace(/-/g, '/'));
				matrix.time = matrix.date.getHours().toString().padStart(2, '0') + ':' + matrix.date.getMinutes().toString().padStart(2, '0');
				item.matrix[j] = matrix
			}
			list.value.push(item);
		}
	}).catch(() => { }).finally(() => {
		loading.value = false
	})
}
onShow(() => {
	getList()
})
</script>
<style lang="scss" scoped>
.position-sticky{
	top:0;
	/* #ifdef H5 */
	top:var(--window-top);
	/* #endif */
}
</style>